<template>
  <el-container>
    <el-header height=10%>
      <blank-top-menu></blank-top-menu>
    </el-header>
    <el-main class="main">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>找回密码</span>
          </div>
        </template>

        <el-form
            label-width="100px"
            label-position="left"
            size="small"
            inline="inline"
            :rules="rules"
            ref="formdata"
            :model="formObj"
        >
          <el-row justify="center">
            <el-form-item label="密码" prop="pwd1">
              <el-input v-model="formObj.pwd1"/>
            </el-form-item>
          </el-row>
          <el-row justify="center">
            <el-form-item label="确认密码" prop="pwd2" >
              <el-input type="password" show-password v-model="formObj.pwd2"/>
            </el-form-item>
          </el-row>
        </el-form>
        <el-button @click="changeAndLeave" class="but" id="nextStep">确认</el-button>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import BlankTopMenu from "@/components/blank-top-menu";
import {ref} from 'vue'
import axios from "axios";
// import axios from 'axios'
// import {ElMessage} from "element-plus";

let centerDialogVisible = ref(false)// eslint-disable-line no-unused-vars
export default {
  name: "register-frame",
  components: {BlankTopMenu},
  data() {
    return {
      formObj: {
        pwd1: '',
        pwd2: '',
      },
    }
  },
  setup() {
    let checkPwd = (rule, value, callback) => {
      if(!value){
        return callback(new Error('密码不能为空!'))
      } else {
        let a = 0 , b = 0
        for(let i = 0 ; i < value.length ; i ++ ){
          if(value[i] <= '9' && value[i] >= '0'){
            a = 1
          }
          if (value[i] <= 'z' && value[i] >= 'a'){
            b = 1
          }
        }
        if(!(a&b)){
          return callback(new Error('密码应由数字+小写字母组成!'))
        }
      }
    }
    let centerDialogVisible = ref(false)
    let rules =  {
      pwd1: [
        {required:true , message :"请输入密码",trigger:"blur"},
        { validator: checkPwd, trigger: "blur" }
      ],
      pwd2: [
        {required:true , message :"请重复输入密码",trigger:"blur"},
      ]
    }
    return {
      centerDialogVisible,
      rules
    }
  },
  methods: {
    changeAndLeave: function () {
      let a = 0 , b = 0,c=0
      for(let i = 0 ; i < this.formObj.pwd1.length ; i ++ ){
        if(this.formObj.pwd1[i] <= '9' && this.formObj.pwd1[i] >= '0'){
          a = 1
        }
        else if (this.formObj.pwd1[i] <= 'z' && this.formObj.pwd1[i] >= 'a'){
          b = 1
        } else{
          c = 1
        }
      }
      if (this.formObj.pwd1 === '' || this.formObj.pwd2 === '') {
        this.$message.error("请输入两次密码")
      } else {
        if (this.formObj.pwd1 === this.formObj.pwd2) {
          if (a == 0 || b == 0 || c == 1){
            this.$message.error("密码格式不正确！")
          }else{
            let params = new URLSearchParams()
            params.append("username", sessionStorage.getItem('username'))
            params.append("password", this.formObj.pwd1)
            axios.post('http://120.48.51.66:8081/user/changePassword', params).then((response)=>{
              if (response.data.code === 200){
                this.$message.success("修改成功，请重新登陆！！")
                this.$router.push('/login')
                sessionStorage.removeItem('username')
              }
            })
          }
        } else {
          this.$message.error("两次密码不一致！")
        }
      }
    },

  }
}
</script>

<style scoped>
html,
body,
.main {
  background: url("@/assets/background.jpg") no-repeat left top;
  background-size: 100% 100%;
}

#nextStep {
  margin-left: 150px;
  margin-top: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 400px;
  height: 220px;
  margin-left: 60%;
  margin-top: 11%;
  border-radius: 22px;
}

.but {
  background-color: #4C8ADA;
  color: white;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>